<template>
	<div ref="chartUser" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '490px',
			},
			height: {
				type: String as PropType<string>,
				default: '237px',
			},
			titleValue: {
				type: Object,
				default: () => ({}),
			},
			xAxisvalue: {
				type: String,
				default: () => 'soc(%)',
			},
			yAxisvalue: {
				type: String,
				default: () => 'soc(%)',
			},
		},
		setup(props) {
			const chartUser = ref<HTMLDivElement | null>(null);
			const {setOptions, resize} = useECharts(chartUser as Ref<HTMLDivElement>);
			let seriesData = props.chartData;
			let legend = props.chartData.map((item) => {
				return item.name;
			});
			let userTit = props.titleValue.title;
			let proportion = props.titleValue.proportion;
			let color = ['#f7c73a', '#7686a3', '#74a0fa', '#73deb4', '#ec7f66', '4AEAB0'];
			const option = reactive({
				grid: {
					top: '20%',
					left: 10,
					right: '12%',
					bottom: 5,
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
					formatter: "{a} {c} <br/>soc(%) {b}"
				},

				xAxis: {
					name: props.xAxisvalue,
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					name: props.yAxisvalue,
					type: 'value',
					 nameTextStyle:{
						align:'left',
						padding: [0, 0, 0, 10]

					 }
				},
				series: [
					{
						name: props.yAxisvalue,
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						areaStyle: {},
					},
				],
			});

			watchEffect(() => {
				console.log(1111111111, props.chartData, props.xAxisvalue);

				props.chartData && initCharts();
			});

			function initCharts() {
				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}
				let seriesData = props.chartData.map((item) => {
					return item.y;
				});
				let xAxisData = props.chartData.map((item) => {
					return item.x;
				});
				// let xAxisData = props.chartData.map((item) => {
				//   return item.name;
				// });
				option.xAxis.data = xAxisData;

				option.series[0].data = seriesData;

				// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

				// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

				setOptions(option);
			}
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});
			return {chartUser};
		},
	});
</script>
